import React from 'react'
import { Layout, Typography, Button, Card } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { SessionResult } from './types/game'
import './App.css'
import StartScreen from './components/StartScreen'
import WarehouseDrawer from './components/WarehouseScreen'
import EquipmentDrawer from './components/EquipmentScreen'
import StartSessionScreen from './components/StartSessionScreen'
import SessionScreen from './components/SessionScreen'
import { useGameState } from './hooks/useGameState'
import { ItemManager } from './utils/itemManager'

const { Header, Content } = Layout;
const { Title, Text } = Typography;

const App: React.FC = () => {
  const {
    currentScreen,
    setCurrentScreen,
    warehouseOpen,
    equipmentOpen,
    startNewGame,
    gameState,
    warehouse,
    sellFromWarehouse,
    openWarehouse,
    closeWarehouse,
    openEquipment,
    closeEquipment,
    equipItem,
    unequipItem,
    startSession,
    executeSessionAction,
    exitSession,
    addToWarehouse
  } = useGameState()

  const handleNewGame = () => {
    // 直接进入对局设置界面
    setCurrentScreen('startSession');
  }

  const handleWarehouse = () => {
    openWarehouse()
  }

  const handleEquipment = () => {
    openEquipment()
  }

  // 测试功能：添加装备到仓库
  const handleTestAddItems = () => {
    const testItems = [
      'basic_pistol',      // 基础手枪
      'assault_rifle',     // 突击步枪
      'tactical_knife',    // 战术刀
      'basic_helmet',      // 基础头盔
      'tactical_vest',     // 战术背心
      'tactical_backpack'  // 战术背包
    ];

    // 添加到仓库
    testItems.forEach(itemId => {
      const item = ItemManager.createItem(itemId, 1);
      if (item) {
        addToWarehouse(item);
      }
    });

    // 显示成功消息
    import('antd').then(({ message }) => {
      message.success('已添加测试装备到仓库！可直接在装备页面选择装备。');
    });
  }

  const renderCurrentScreen = () => {
    switch (currentScreen) {
      case 'start':
        return (
          <StartScreen
            onNewGame={handleNewGame}
            onWarehouse={handleWarehouse}
            onEquipment={handleEquipment}
            onTestAddItems={handleTestAddItems}
          />
        )
      case 'settings':
        return (
          <div style={{ padding: '24px', backgroundColor: '#141414', minHeight: 'calc(100vh - 64px)' }}>
            <Card style={{ backgroundColor: '#1f1f1f', border: '1px solid #303030' }} 
              title={<Title level={4} style={{ margin: 0 }}>游戏设置</Title>}
              extra={
                <Button 
                  icon={<ArrowLeftOutlined />} 
                  onClick={() => setCurrentScreen('start')}
                >
                  返回主菜单
                </Button>
              }
            >
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <Text style={{ color: '#8c8c8c' }}>设置功能开发中...</Text>
              </div>
            </Card>
          </div>
        )
      
      case 'startSession':
        return (
          <StartSessionScreen
            equipment={gameState.playerStats.equipment}
            onStartSession={(selectedItems) => {
              startSession(selectedItems);
            }}
            onBack={() => setCurrentScreen('start')}
          />
        )
      
      case 'session':
        return gameState.currentSession ? (
          <SessionScreen
            session={gameState.currentSession}
            onActionExecuted={(actionType, targetPosition, targetEnemy, containerId) => {
              const result = executeSessionAction(actionType, targetPosition, targetEnemy, containerId);
              
              // 显示消息
              if (result?.message) {
                import('antd').then(({ message }) => {
                  if (result.sessionResult) {
                    if (result.sessionResult === SessionResult.SUCCESS) {
                      message.success(result.message);
                    } else {
                      message.error(result.message);
                    }
                  } else {
                    message.info(result.message);
                  }
                });
              }
            }}
            onExitSession={() => {
              import('antd').then(({ Modal }) => {
                Modal.confirm({
                  title: '确认退出对局',
                  content: '退出对局将失去所有携带和收集的物品，确认退出吗？',
                  okText: '确认退出',
                  okType: 'danger',
                  cancelText: '取消',
                  onOk() {
                    exitSession();
                  }
                });
              });
            }}
          />
        ) : (
          <div>对局数据错误</div>
        )
      
      default:
        return null
    }
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
        <Title level={2} style={{ 
          color: 'white', 
          margin: 0
        }}>
          交战，搜索，搞定就撤
        </Title>
      </Header>
      
      <Content>
        {renderCurrentScreen()}
      </Content>
      
      {/* 仓库抽屉 */}
      <WarehouseDrawer
        warehouse={warehouse}
        open={warehouseOpen}
        onClose={closeWarehouse}
        onSellItem={sellFromWarehouse}
      />
      
      {/* 装备抽屉 */}
      <EquipmentDrawer
        equipment={gameState.playerStats.equipment}
        inventory={warehouse.items}
        open={equipmentOpen}
        onClose={closeEquipment}
        onEquipItem={equipItem}
        onUnequipItem={unequipItem}
      />
    </Layout>
  )
}

export default App
